.market-container {
    padding: 1rem 1rem 7rem;
    min-height: 100vh;
    box-sizing: border-box;
    background: url("../images/market_bg.png");
    background-size: 100% auto;
    background-repeat: no-repeat;

    .market-banner{
        aspect-ratio: 2/1;
        border-radius: 2.4rem;
        overflow: hidden;

        img {
            width: 100%;
            height: 100%;
            object-fit: fill;
        }
    }

    .market-tab{
        @include flex-center-start();
        .name{
            font-size: 1.4rem;
        }
    }

    .market-list-box{
        margin-top: 1rem;
        .market-list{
            @include flex-center-start();
            flex-wrap: wrap;
            .item{
                width: 32%;
                margin-top: 1rem;
                margin-right: 2%;
                &:nth-of-type(3n){
                    margin-right: 0;
                }
                .item-box{
                    padding: .8rem;
                    border-radius: 1rem;
                    background-color: #080808;
                    border: 1px solid #3c3c3c;
                    .card-box{
                        position: relative;
                        width: 100%;
                        aspect-ratio: 3/4;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                        .level{
                            position: absolute;
                            padding: .4rem 1rem .4rem .4rem;
                            font-size: 1rem;
                            border-radius: 0 0 4rem 0;
                            background-color: rgba(0,0,0,.8);
                        }
                    }
                    .user-info{
                        @include flex-center-start();
                        .user-photo{
                            width: 2rem;
                            height: 2rem;
                            border-radius: 50%;
                            overflow: hidden;
                            background-color: #080808;
                            img{
                                width: 100%;
                                height: 100%;
                                object-fit: fill;
                            }
                        }
                        .name{
                            margin-left: .2rem;
                            color: #787878;
                        }
                    }
                    .title{
                        padding: .4rem 0;
                        font-size: 1rem;
                        @include text-ellipsis-single();
                    }
                    .bottom-price{
                        @include flex-center-between();
                        .price-box{
                            @include flex-center-start();
                            img{
                                width: 1.4rem;
                                height: 1.4rem;
                            }
                            .num{
                                margin-left: .4rem;
                                font-size: 1rem;
                                font-weight: bold;
                                color: #c98fff;
                            }
                        }
                    }
                    .buy-box{
                        margin-top: .4rem;
                        .btn{
                            width: 100%;
                            font-size: 1rem;
                            outline: none;
                            background-color: #7c0de3;
                            color: #fff;
                        }
                        
                    }
                }
            }
        }
    }

}